var d;var posx;var posy;var initx=false;var inity=false; var coordx; var coordy;
var pct_x1; var pct_y1; var pct_x2; var pct_y2;

function getMouse(obj,e)
{
	posx=0;posy=0;
	var ev=(!e)?window.event:e;//Moz:IE
	if (ev.pageX)
	{//Moz
		posx=ev.pageX;//+window.pageXOffset;
		posy=ev.pageY;//+window.pageYOffset;
	}
	else if(ev.clientX)
	{//IE
		posx=ev.clientX;//+document.body.scrollLeft;
		posy=ev.clientY;//+document.body.scrollTop;
	}
	else
	{
		return false
	}//old browsers

	
	var target = (e && e.target) || (event && event.srcElement);
	
		obj.onmousedown=function()
		{
			if(target.tagName=='IMG' && target.id.indexOf("imgframe_") != -1)
			{					
			   	clearZones();
				initx=posx; inity=posy;
				d = document.createElement('div');
				d.className='square'
				d.style.left=initx+'px';d.style.top=inity+'px';
				
				document.getElementsByTagName('body')[0].appendChild(d)
			}
		}
		obj.onmouseup=function()
		{
			if(target.tagName=='IMG' && target.id.indexOf("imgframe_") != -1)
			{
			//	alert('coords x1['+Math.abs(initx)+'] y1['+Math.abs(inity)+'] x2['+Math.abs(posx)+'] y2['+Math.abs(posy)+']');
				
				if(initx)
				{
					d.style.left=posx-initx<0?posx+'px':initx+'px';
					d.style.top=posy-inity<0?posy+'px':inity+'px';
					d.style.width=Math.abs(posx-initx)+'px';
					d.style.height=Math.abs(posy-inity)+'px';					
					
					coordx=(initx-target.offsetLeft);
					coordy=(inity-target.offsetTop);				
					coordx2=(posx-target.offsetLeft);
					coordy2=(posy-target.offsetTop);				
				
					pct_x1 = Math.round((coordx*100) / target.width);
					pct_y1 = Math.round((coordy*100) / target.height);
					pct_x2 = Math.round((coordx2*100) / target.width);
					pct_y2 = Math.round((coordy2*100) / target.height);				

					document.getElementsByName('new_area_x1')[0].value=pct_x1;
					document.getElementsByName('new_area_y1')[0].value=pct_y1;
					document.getElementsByName('new_area_x2')[0].value=pct_x2;
					document.getElementsByName('new_area_y2')[0].value=pct_y2;					
					
					//alert('coords x1['+Math.abs(pct_x1)+'] y1['+Math.abs(pct_y1)+'] x2['+Math.abs(pct_x2)+'] y2['+Math.abs(pct_y2)+']');			
					
				}
				initx=false;inity=false;
			}
		}
	
	
}

// register onLoad event with anonymous function

/*JQuery compatible version*/
$(document).ready(function(e)
{
$('img').each(function(i) 
{
  $(this).bind('dragstart', function(event) { event.preventDefault(); });

});

});


/*window.onload = function (e) {
    var evt = e || window.event,// define event (cross browser)
        imgs,                   // images collection
        i;                      // used in local loop
    // if preventDefault exists, then define onmousedown event handlers
    if (evt.preventDefault) {
        // collect all images on the page
        imgs = document.getElementsByTagName('img');
        // loop through fetched images
        for (i = 0; i < imgs.length; i++) {
            // and define onmousedown event handler
            imgs[i].onmousedown = disableDragging;
        }
    }
};

*/

function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}


// disable image dragging
function disableDragging(e) {
    e.preventDefault();
}

function clearZones()
{
	var divs = document.getElementsByTagName('div');
var div;
var i = divs.length;

while (i--) {
  div = divs[i];

  if (div.className == 'square') {
    div.parentNode.removeChild(div);
  }
}
	

}

function getZoneInfo(num)
{
	res = document.getElementsByName('area_'+num+'_x1');

	if(res.length == 0)
		return false;
	var zone_x1 = document.getElementsByName('area_'+num+'_x1')[0].value;
	var zone_y1 = document.getElementsByName('area_'+num+'_y1')[0].value;
	var zone_x2 = document.getElementsByName('area_'+num+'_x2')[0].value;
	var zone_y2 = document.getElementsByName('area_'+num+'_y2')[0].value;	

	var imgs = document.getElementsByTagName('img');
	var img;
	var i = imgs.length;

	while (i--) 
	{
	  img = imgs[i];

	  if (img.parentNode.className == "imgframe") 
		el = img;
	}

	if(!el) return false;

	var pos = getPos(el);

	var coord_x1 = Math.round((el.width  * zone_x1) / 100)+pos.x;
	var coord_y1 = Math.round((el.height * zone_y1) / 100)+pos.y;
	var coord_x2 = Math.round((el.width  * zone_x2) / 100)+pos.x;
	var coord_y2 = Math.round((el.height * zone_y2) / 100)+pos.y;

	/* New system */
/*	var coord_x1 = Math.round((zone_x1-el.width) +pos.x);
	var coord_y1 = Math.round((zone_y1-el.height) +pos.y);
	var coord_x2 = Math.round((zone_x2-el.width) +pos.x);
	var coord_y2 = Math.round((zone_y2-el.height) +pos.y);
*/


	if(coord_x1 > coord_x2)
	{
		var tmp = coord_x1;
		coord_x1 = coord_x2;
		coord_x2 = tmp;
	}

	if(coord_y1 > coord_y2)
	{
		var tmp = coord_y1;
		coord_y1 = coord_y2;
		coord_y2 = tmp;
	}
		
	
    return {x1: coord_x1, y1: coord_y1, x2: coord_x2, y2: coord_y2};


}

function displayZones()
{
	clearZones();
	
	for (i=1; i<6; i++)
	{
		var zone_info = getZoneInfo(i);

		if(!zone_info)
			continue;
		d = document.createElement('div');
		d.className='square'
		d.style.left=zone_info.x1+'px';
		d.style.top=zone_info.y1+'px';
		d.style.width=Math.abs(zone_info.x1-zone_info.x2)+'px';
		d.style.height=Math.abs(zone_info.y1-zone_info.y2)+'px';					
		d.innerHTML = i;
		document.getElementsByTagName('body')[0].appendChild(d)
	}	
}

function init_form()
{
	addToolbarButton('camZonesConf',"Clear Zones","clearZones(); return false;",'clear_zones');
	addToolbarButton('camZonesConf',"Display configured Zones","displayZones(); return false;",'display_zones');	

	document.onmousemove=function(event)
	{
		getMouse(document,event);
	}

	clearZones();
	setTimeout("displayZones()", 1000);

}
